<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高亮</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<style>
    .highlight {
        background: yellow;
    }
</style>

<body>

    <input id="txt" type="text">  &nbsp;
    <button id="btn" onclick="getLight()">获取</button>&nbsp;
    <button id="btn" onclick="dontLight() ">取消高亮</button><br>
    <span id="target" >11月21日0-24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例2225例。其中境外输入病例80例（广东35例，福建12例，重庆6例，云南6例，上海5例，浙江4例，四川3例，陕西3例，天津2例，湖南2例，内蒙古1例，江苏1例），含7例由无症状感染者转为确诊病例（浙江4例，福建1例，
        四川1例，陕西1例）；本土病例2145例（广东781例，北京274例，四川240例，重庆178例，
        云南147例，山西89例，内蒙古77例，河南75例，江苏51例，浙江37例，黑龙江28例，
        陕西23例，辽宁22例，山东22例，新疆19例，甘肃14例，贵州13例，湖南11例，福建10例，
        湖北9例，河北5例，海南5例，上海4例，广西3例，青海3例，安徽2例，西藏2例，天津1例），
        含592例由无症状感染者转为确诊病例（广东434例，重庆38例，四川24例，浙江20例，甘肃14例，
        北京12例，内蒙古7例，湖南7例，江苏6例，陕西6例，山西4例，辽宁4例，黑龙江4例，福建3例，
        河南3例，广西2例，青海2例，安徽1例，云南1例）。新增死亡病例2例，均为本土病例
        （河南1例，四川1例）；无新增疑似病例。</span>
        <input type="checkbox" name="aa" value="0" />0
        <input type="checkbox" name=" aa " value="1" />1
        <input type="checkbox" name=" aa " value="2" />2
        <input type="checkbox" name=" aa " value="3" />3
        <input type="button" onclick="abc()" value="提 交" />
        <div id="allselect"></div>
    
    
        <form name="a">
            <select name="a" size="1" onchange="_sel(this)">
            <option value="a">1</option>
            <option value="b">2</option>
            <option value="c">3</option>
            </select>
        </form>


        用户名：<input type="text" id="username"/><br/>
        密  码：<input type="password" id="password"/><br/>
        确认密码：<input type="password" id="password1"/><br/>
        <button id="btnSubmit" type="button">提交</button><br/>
    

        <table>
            <tr>
                <td>留言</td>
                <td id="number"> 0 </td>
            </tr>
            <tr>
                <td colspan=2>
                    <textarea id="feedBack" onkeyup="test()" rows=6></textarea>
                </td>
            </tr>
        </table>
        
</body>
<script src="./../bag.js">
    
</script>
<script type="text/javascript">
    function getLight(){
        var span=document.getElementById('target')
        var text =document.getElementById('txt').value
        text=text.split(' ')
        for (let i = 0; i < text.length; i++) {
            var point='<span style="background-color:yellow ;">'+ text[i]+'</span>' 
            span.innerHTML= span.innerHTML.replace(new RegExp(text[i],'g'), point);
        }
    }
    function dontLight(){
        var span = document.querySelectorAll('span')
        $(span).css('background-color','transparent')
    }
    /*
        7、题目描述
        用jQuery编程实现获取选中复选框值
        HTML结构如下：
        
        <div>
            <input type="checkbox" name="aa" value="0" />0
            <input type="checkbox" name=" aa " value="1" />1
            <input type="checkbox" name=" aa " value="2" />2
            <input type="checkbox" name=" aa " value="3" />3
            <input type="button" onclick="abc()" value="提 交" />
            <div id="allselect"></div>
        </div>
        */
        console.log(`======= 第7题 =======`);
        function abc() {
            var div = document.getElementById('allselect')
            div.innerHTML=''
            var $input = $(':checkbox')
            var text ='选择了'
            var input = $input.map(Element=>{
                if($input[Element].checked){
                    text+= ' '+$input[Element].value
                }
            })
            text=document.createTextNode(text)
            div.appendChild(text)
        }

        /*
        8、题目描述
        实现sel函数显示当前选项的文本和值
        <div>
            <form name="a">
                <select name="a" size="1" onchange="_sel(this)">
                <option value="a">1</option>
                <option value="b">2</option>
                <option value="c">3</option>
                </select>
            </form>
        </div>
        
        
        */
        console.log(`======= 第8题 =======`);

        function _sel(){
            var form = document.querySelector('form')
            var span = $(form)
            if (span[0].childElementCount!=1) {
                span = $(form)[0].lastElementChild
                form.removeChild(span)
            }
            var sel = document.querySelector('select')
            var value = sel.value
            
            var option = document.querySelectorAll('option')
             
            var num =''
            for (let i = 0; i < option.length; i++) {
                if (option[i].value==value) {
                    num=option[i].innerText;
                    break;
                }
            }
            var text = '选择了'+num+'且value值为'+value
            var span = document.createElement('span')
            text= document.createTextNode(text)
            span.appendChild(text)
            form.appendChild(span)
            
        }
        

        /*
        9、题目描述
        要求用jQuery完成:  点击id为btn的按钮
        
        a.判断id为username的输入是否为空，如果为空，则弹出“用户名不能为空”的提示。
        
        b.判断id为password的输入字符串个数是否小于6位，如果小于6位，则弹出“你输入的密码长度不可以少于6位”的提示
        
        HTML结构如下：
        <div>
            用户名：<input type="text" id="username"/><br/>
            密  码：<input type="password" id="password"/><br/>
           确认密码：<input type="password" id="password1"/><br/>
            <button id="btnSubmit" type="button">提交</button><br/>
        </div>
        */
        console.log(`======= 第9题 =======`);
        $('#btnSubmit').attr('onclick','fn()')
        function fn() {
            var $userid= $('#username')[0].value
            if ($userid=='') {
                alert('用户名不能为空')
                return
            }
            var $password = $(':password')
            if ($password[0].value!=$password[1].value) {
                alert('两次密码不相同')
                return
            }
            var passwordlong = $password[0].value
            if (/\w{6}/.test(passwordlong)==false) {
                alert('你输入的密码长度不可以少于6位')
                return
            }
            alert('符合')
            
        }

        /*
        10、题目描述
        
        在下面的HTML文档中，编写函数test() ,实现如下功能：
        
        （1）当多行文本框中的字符数超过20个，只截取20个字符
        
        （2）在id为number的td中显示文本框的字符个数
        
        HTML结构如下：
        <table>
            <tr>
                <td>留言</td>
                <td id="number"> 0 </td>
            </tr>
            <tr>
                <td colspan=2>
                    <textarea id="feedBack" onkeyup="test()" rows=6></textarea>
                </td>
            </tr>
        </table>
        
        
        
        */
        console.log(`======= 第10题 =======`);
      
        function test(){
            var text = $('#feedBack')
            
            var value = text[0].value
          
            if (value.length>20) {
                var ershi=value.slice(0,20)
                text[0].value=ershi
            }
            var $num= text[0].value.length
           
            $('#number')[0].innerHTML= $num 
        }
</script>

</html>